<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>智能编码体验</title>
    <!-- 引入Bootstrap CSS -->
    <link href="/bootstrap.min.css" rel="stylesheet">
    <link href="/sweetalert.min.css" rel="stylesheet">
    <link href="/index.css" rel="stylesheet">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">智能编码体验</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/">数组交集提取</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/date">计算日期间隔</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- 标签页 -->
<div class="container mt-4">
    <div class="mb-3">
        <h2>题目描述</h2>
        <p>给定两个整数数组，找出它们的重复部分，并返回一个新的数组，包含所有出现在两个数组中的元素。</p>
        <h4>示例1</h4>
        <p>输入：数组1 [1, 2, 2, 1]，数组2 [2, 2]</p>
        <p>输出：[2, 2]</p>
        <p>解释：两个数组都有两个2，结果数组包含两个2。</p>
        <h4>示例2</h4>
        <p>输入：数组1 [4, 9, 5]，数组2 [9, 4, 9, 8, 4]</p>
        <p>输出：[4, 9]</p>
        <p>解释：结果数组可以是 [9, 4]，顺序不重要。</p>
    </div>
    <div class="container mt-4">
        <div class="mb-3">
            <label for="array1Input" class="form-label">输入数组1:</label>
            <input type="text" class="form-control" id="array1Input" placeholder="例如：1,2,2,1">
        </div>
        <div class="mb-3">
            <label for="array2Input" class="form-label">输入数组2:</label>
            <input type="text" class="form-control" id="array2Input" placeholder="例如：2,2">
        </div>
        <button onclick="findCommonElements()" class="btn btn-primary mt-2">提交</button>
    </div>
    <div id="result" class="mt-5" style="font-size: 1.5rem;"></div>
</div>

<!-- 引入Bootstrap JS -->
<script src="/jquery-3.5.1.min.js"></script>
<script src="/popper.min.js"></script>
<script src="/bootstrap.bundle.min.js"></script>
<script src="/sweetalert.min.js"></script>
<script>
    function findCommonElements() {
        // 获取输入的数组字符串
        var array1Str = $('#array1Input').val();
        var array2Str = $('#array2Input').val();
        // 确保两个输入不为空
        if (!array1Str || !array2Str) {
            swal('警告', '请填写两个数组。', 'warning');
            return;
        }
        // 将中文逗号替换为英文逗号
        array1Str = array1Str.replace(/，/g, ',');
        array2Str = array2Str.replace(/，/g, ',');
        // 将字符串转换为数组
        var array1 = array1Str.split(',').map(Number);
        var array2 = array2Str.split(',').map(Number);
        // 检查数组是否有效
        if (array1.some(isNaN) || array2.some(isNaN)) {
            swal('错误', '请输入有效的整数数组。', 'error');
            return;
        }
        // 发送 AJAX POST 请求到后端
        $.ajax({
            url: '/common_elements', // 后端接收请求的URL
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                array1: array1,
                array2: array2
            }),
            success: function(response) {
                if (response.length === 0) {
                    $('#result').text('没有重复元素');
                } else {
                    $('#result').text('重复元素: ' + response.join(', '));
                }
            },
            error: function(xhr, status, error) {
                // 请求失败，显示错误消息
                swal('错误', '发生错误：' + error, 'error');
            }
        });
    }
</script>
</body>
</html>
